<template>
    <div>


        <v-container class="pt-6 grey lighten-3">
          <v-row>
            <v-col class="pa-0" :cols="showDelButton?11:12">
              <v-card
                  class="mx-auto "
              >

                <v-list three-line class="grey lighten-3 pa-0">
                  <template >

                    <v-list-item
                        :key="1"
                        @click="gotoArticle(1)"
                        target="_blank"
                        three-line
                    >
                      <!--//:href="'/home/article/detail/'+item.id"-->

                      <v-list-item-content >
                        <v-list-item-title >java性能优化</v-list-item-title>
                        <v-list-item-subtitle>如何优化java性能</v-list-item-subtitle>
                      </v-list-item-content>

                    </v-list-item>
                    <v-list-item
                        :key="1"
                        @click="gotoArticle(1)"
                        target="_blank"
                        three-line
                    >
                      <!--//:href="'/home/article/detail/'+item.id"-->

                      <v-list-item-content >
                        <v-list-item-title >java stream流</v-list-item-title>
                        <v-list-item-subtitle>java stream流</v-list-item-subtitle>
                      </v-list-item-content>

                    </v-list-item>
                    <v-list-item
                        :key="1"
                        @click="gotoArticle(1)"
                        target="_blank"
                        three-line
                    >
                      <!--//:href="'/home/article/detail/'+item.id"-->

                      <v-list-item-content >
                        <v-list-item-title >jvm虚拟机笔记</v-list-item-title>
                        <v-list-item-subtitle>jvm虚拟机笔记</v-list-item-subtitle>
                      </v-list-item-content>

                    </v-list-item>
                    <v-divider
                    ></v-divider>
                  </template>


                </v-list>

              </v-card>
            </v-col>
            <v-col class="pa-0" cols="1" v-if="showDelButton">

              <v-btn icon @click="delArticle(item.id)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </v-col>
          </v-row>
            <v-row>
                <v-col cols="12">
                    <v-pagination
                            @next="getNext"
                            @previous="getPre"
                            @input="getInput"
                            value="2"
                            v-model="page"
                            :length="articleData.pages"
                            :total-visible="8"
                            circle
                    ></v-pagination>
                </v-col>
            </v-row>
        </v-container>
    </div>

</template>

<script>
  /**
   * 文章列表页面
   */
  import Vue from 'vue'

  export default {
    name: 'Main',

    data() {
      return {
        page: 1,
        articleData: [],
        articleType: 'article',
        showTimeAndViewCount: [],
        showDelButton: false
      }
    },
    methods: {
      /*跳转到指定id对应文章的具体页面*/
      gotoArticle(articleId) {
        console.log(articleId+"-----");
        // 如果是在首页当点击某个文档的时候，直接跳转到文章详情页面,如果是在管理面，直接跳转到编辑页面
        if (this.$route.path == '/home/main') {
          this.$router.push('/home/article/detail/' + articleId);
        } else {
          this.$router.push('/manager/article/edit/' + articleId)
        }
      },
      /**
       * 根据文章类型获取文章列表,这里的文章类型指的是草稿或者正式文章
       */
      async getArticleList() {
        try {
          let res;
         /* // 如果是到了后端管理页面则要请求另外的接口
          if (this.$route.path.indexOf("manager")!==-1){
           const {data:tmp}=await this.$http.get('/manager/articles', {
              params: {
                articleType: this.articleType
              }
            });
           if (tmp.errorCode===201){
             // 本来打算弄提示框的，但是我觉得有点麻烦，所以就不弄了
             // alert("当前登录信息已无效，请重新登录！");
             // 删除在本地存储的token
             window.localStorage.removeItem("authToken");
             this.$router.push("/login");
             return;
           }
           res=tmp;


          }else {
            const {data: tmp} =await this.$http.get('articles', {
              params: {
                articleType: this.articleType
              }
            });
            res=tmp;
            console.log(tmp);
          }*/


          this.articleData = {list:{id:1,articleTitle:'java 性能优化',description:'如果优化jvm的性能'},pages:1};
          console.log(this.articleData);
          // 生成创建时间和阅读数的词条
          let arr = this.articleData.list;
          for (let i = 0; i < arr.length; i++) {
            //Vue.set(this.showTimeAndViewCount, i, '创建时间:' + this.$moment(arr[i].createUpdateTime).format('YYYY-MM-DD HH:mm:ss') + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阅读数:&nbsp;&nbsp;' + arr[i].viewCount);
           // Vue.set(this.showTimeAndViewCount, i, '创建时间:' + '2021-10-23 09:09:12' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阅读数:&nbsp;&nbsp;' + 12);
          }
        } catch (e) {
          console.log(e);
          alert('获取文章列表失败');
        }

      },
      /**
       *  获取下一的文章列表数据
       * @returns {Promise<void>}
       */
      async getNext() {
        const {data: res} = await this.$http.get('articles', {
          params: {
            pageNum: this.page,
            articleType: this.articleType
          }
        });
        this.articleData = res.data;
      },
      /**
       * 点击前一页按钮时获取文章列表数据
       * @returns {Promise<void>}
       */
      async getPre() {
        const {data: res} = await this.$http.get('articles', {
          params: {
            pageNum: this.page,
            articleType: this.articleType
          }
        });
        this.articleData = res.data;
      },
      /**
       * 当点击具体的某一页的时候发出请求
       * @returns {Promise<void>}
       */
      async getInput() {
        const {data: res} = await this.$http.get('articles', {
          params: {
            pageNum: this.page,
            articleType: this.articleType
          }
        });
        this.articleData = res.data;
      },
      async delArticle(articleId) {
        try{
          const {data: res} = await  this.$http.delete('/manager/articles/del/' + articleId);
          if (res.errorCode==200){
            alert('文章删除成功！');
            this.getArticleList();
          }
        }catch (e) {
          alert('文章删除失败，请重试！')
        }

      }
    },
    created() {
      if (this.$route.path == '/manager/article/draft/list') {
        /**
         * 设置当前页面请求的文章类型
         * @type {string}
         */
        this.articleType = 'draft';

      } else {

        this.articleType = 'article';
      }
      this.getArticleList();
      if (this.$route.path != '/home/main') {
        this.showDelButton = true;
      }
    }
  }
</script>

<style scoped>

</style>